<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <div class="header"></div>
    <div class="main">
      <div class="main-left"></div>
      <div
        class="qiankun-container"
        v-loading="qiankunLoading"
        element-loading-text="正在加载资源，请稍后..."
      >
        <qiankunView />
      </div>
    </div>
  </div>
</template>
<script>
import qiankunView from '@/components/qiankun-view.vue'
import { mapState } from 'vuex'
export default {
  components: {
    qiankunView
  },
  computed: {
    ...mapState(['qiankunLoading'])
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 60px;
    background: gray;
  }
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .main-left {
      width: 200px;
      height: 100%;
      background: gray;
    }
    .qiankun-container {
      flex: 1;
      flex-shrink: 1;
      padding: 10px;
      overflow: hidden;
    }
  }
}
</style>
